<jsp:include page="../includes/header.jsp" />

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<c:set var="webContext" value="${pageContext.request.contextPath}" />
<style>
video {
	display: none;
}
</style>
<section class="title">
	<div class="container">
		<div class="row-fluid">
			<div class="span6">
				<h1>Transmitir Clase Online</h1>
			</div>
			<div class="span6">
				<ul class="breadcrumb pull-right">
					<li><a href="/">Home</a> <span class="divider">/</span></li>
					<li class="active">Clase Online</li>
				</ul>
			</div>
		</div>
	</div>
</section>
<!-- / .title -->

<section id="realidad-aumentada" class="container">
	<video autoplay></video>
	<canvas id='miCanvas' width='800' height='600'></canvas>
	<script src="http://192.168.1.149:8585/socket.io/socket.io.js"></script>
	<script>
		var bandera = 0;
		var websocket = io.connect("http://192.168.1.149:8585");
		window.URL = window.URL || window.webkitURL;
		navigator.getUserMedia = navigator.getUserMedia
				|| navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

		navigator.getUserMedia({
			audio : true,
			video : true
		}, function(vid) {
			bandera = 1;
			document.querySelector('video').src = window.URL
					.createObjectURL(vid);
		}, function() {
			//Error calback
		});
		window.requestAnimFrame = (function(callback) {
			return window.requestAnimationFrame
					|| window.webkitRequestAnimationFrame
					|| window.mozRequestAnimationFrame
					|| window.oRequestAnimationFrame
					|| window.msRequestAnimationFrame || function(callback) {
						window.setTimeout(callback, 1000 / 100);
					};
		})();
		function dFrame(ctx, video, canvas) {
			ctx.drawImage(video, 0, 0);
			var dataURL = canvas.toDataURL('image/jpeg', 1);
			if (bandera != 0)
				websocket.emit('newFrame', dataURL);
			requestAnimFrame(function() {
				setTimeout(function() {
					dFrame(ctx, video, canvas);
				}, 100)
			});
		}
		window.addEventListener('load', init);
		function init() {
			var canvas = document.querySelector('#miCanvas');
			var video = document.querySelector('video');
			var ctx = canvas.getContext('2d');
			dFrame(ctx, video, canvas);
		}
	</script>
</section>


<jsp:include page="../includes/footer.jsp" />